<template>
	<view style="display: flex;flex-direction: column; width: 749rpx;">
		<view style="display: flex;flex-flow: row;margin: 20rpx 0 10rpx 30rpx">
			<view
				style="display: flex;width: 6rpx;height: 29rpx;background-color: blue;border-radius: 10rpx;margin: 10rpx 10rpx 0 30rpx;">
			</view>
			<view style="font-weight: 700;">
				老师风采
			</view>
		</view>
		<!-- 下面是连接服务器的数据库，管理老师-->
		<view style="display: flex;flex-wrap: wrap;padding: 10rpx 0;justify-content: space-around;">
			<view v-for="(item,index) in laoshilist" :key=index
				style="display: flex;width: 216rpx;border-radius: 20rpx;overflow: hidden;background-color: white; margin:10rpx 0 20rpx 0 ;align-items: center;box-shadow: 2rpx 2rpx 3rpx 3rpx #c2c2c2;flex-direction: column;">
				<view style="display: flex; width: 216rpx;height: 216rpx;align-items: center;">
					<image v-if="item.avatar" style="width: 216rpx;height: 216rpx;" :src="item.avatar" mode="aspectFill"></image>
					<image v-else style="width: 216rpx;height: 216rpx;" src="../../static/moren.png" mode="aspectFill"></image>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;margin-top: 20rpx;font-size: 28rpx;">
					<view>
						{{item.name}}
					</view>
					<text style="color: #c2c2c2;font-size: 23rpx;margin-top: 10rpx;">{{item.shenfen}}</text>
					<view
						style="color: #c2c2c2;font-size: 23rpx;align-items: center;margin-top: 10rpx;margin-bottom: 10rpx;">
						Tel:{{item.mobile.substring(0,3)}}****{{item.mobile.substring(item.mobile.length-4,item.mobile.length)}}
					</view>
				</view>
			</view>
			<view  v-if="(3-caidanbucha >0 && caidanbucha!=0)"
				style="display: flex;width: 216rpx;border-radius: 20rpx;overflow: hidden;margin:10rpx 0 20rpx 0 ;align-items: center;flex-direction: column;">
				
			</view>
			<view  v-if="(3-caidanbucha >1 && caidanbucha!=0)"
				style="display: flex;width: 216rpx;border-radius: 20rpx;overflow: hidden;margin:10rpx 0 20rpx 0 ;align-items: center;flex-direction: column;">
				
			</view>
			<view  v-if="(3-caidanbucha >2 && caidanbucha!=0)" 
				style="display: flex;width: 216rpx;border-radius: 20rpx;overflow: hidden;margin:10rpx 0 20rpx 0 ;align-items: center;flex-direction: column;">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				caidanbucha:0,
				laoshilist: [{
					mobile: '',
					name: '',
					zhaopian: ''
				}],
			}
		},
		async onLoad() {
			this.laoshilist =await uni.getStorageSync('aoyashenglaoshilist')
			this.caidanbucha=this.laoshilist.length % 3
			this.laoshilistfun()
		},
		methods: {
			//获取老师的明细
			laoshilistfun() {
				uniCloud.callFunction({
					name: "funshare",
					data: {
						leixing: 11,
					}
				}).then(res => {
					this.laoshilist = res.result.data
					this.caidanbucha=this.laoshilist.length % 3
					this.laoshilist.forEach((item, index) => {
						this.laoshilist[index].shenfen=''
						if (item.role.indexOf('jiaowulaoshi') != -1) {
							if(this.laoshilist[index].shenfen==''){
								this.laoshilist[index].shenfen += '教务老师'
							}else{
								this.laoshilist[index].shenfen += '/教务老师'
							}
						}
						if (item.role.indexOf('renkelaoshi') != -1) {
							if(this.laoshilist[index].shenfen==''){
								this.laoshilist[index].shenfen += '任课老师'
							}else{
								this.laoshilist[index].shenfen += '/任课老师'
							}
						}
					})	
					setTimeout(() => {
					    uni.setStorageSync('aoyashenglaoshilist',this.laoshilist)
					}, 3000)
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>